<script setup lang="ts">
import { ref, onMounted, onUnmounted, markRaw, computed } from "vue";
import HistoricalTrend from "@/components/HistoricalTrend.vue";
import MapView from "@/components/MapView.vue";
import Maintenance from "@/components/Maintenance.vue"; 
import request from '@/utils/request'
import { ElMessage, ElLoading } from 'element-plus'


// 获取设备的表格数据
const tableData = ref([])
const getShebei = async () => {
    try {
        const data = await request.get('/media/ipAddress')
        const resultArray = data.data.map((res: { status: string; data: { cabinetNum: any; voltLevel: any; eventTotalCount: any; totalScore: any; }; _ip: any; }) => {
            if (res.status == 'success') {
                const { cabinetNum, voltLevel, eventTotalCount, totalScore } = res.data
                return {
                    _ip: res._ip,
                    cabinetNum,
                    voltLevel,
                    eventTotalCount,
                    totalScore
                };
            } else {
                return {
                    _ip: res._ip,
                    cabinetNum: 'ip_Error',
                    voltLevel: '--',
                    eventTotalCount: '--',
                    totalScore: '--'
                };
            }
        });
        tableData.value = resultArray
        // ElMessage.success('请求成功')
    } catch (error: any) {
        ElMessage.error(error.response?.data?.message || '请求失败')
    } finally {
    }
}

// 菜单选择
const menuList = ref([{
    actIcon: '../../src/assets/me_home/dingwei.png',
    icon: '../../src/assets/me_home/dingwei1.png',
    name: 'Locate',
    maxName: '地理视图'
}, {
    actIcon: '../../src/assets/me_home/mulu.png',
    icon: '../../src/assets/me_home/mulu1.png',
    name: 'Summary',
    maxName: '电气柜体监控'
    // maxName: '电气柜体监控' //总结

}, {
    actIcon: '../../src/assets/me_home/mti.png',
    icon: '../../src/assets/me_home/mti1.png',
    name: 'Operation',
    maxName: 'Operation'
    // maxName: '行动'
}, {
    actIcon: '../../src/assets/me_home/muluu.png',
    icon: '../../src/assets/me_home/muluu1.png',
    name: 'Documents',
    maxName: '标题标题'
}, {
    actIcon: '../../src/assets/me_home/sousuo.png',
    icon: '../../src/assets/me_home/sousuo1.png',
    name: 'Energy',
    maxName: '能量'
}, {
    actIcon: '../../src/assets/me_home/tubiao.png',
    icon: '../../src/assets/me_home/tubiao1.png',
    name: 'Health',
    maxName: '历史趋势'
}, {
    actIcon: '../../src/assets/me_home/bijiben.png',
    icon: '../../src/assets/me_home/bijiben1.png',
    name: 'Maintenance',
    maxName: 'Maintenance'
    // maxName: '维护'
}, {
    actIcon: '../../src/assets/me_home/shezhi.png',
    icon: '../../src/assets/me_home/shezhi1.png',
    name: 'Configure',
    maxName: 'Configure'
    // maxName: '配置'
}, {
    actIcon: '../../src/assets/me_home/yuyan.png',
    icon: '../../src/assets/me_home/yuyan1.png',
    name: 'Language',
    maxName: 'Language'
}, {
    actIcon: '../../src/assets/me_home/bangzhu.png',
    icon: '../../src/assets/me_home/bangzhu1.png',
    name: 'Help',
    maxName: 'Help'
}])
const actIndex = ref(0)
// const actIndex = ref(5)
const tabname = ref({
    name: 'Locate',
    maxName: '------'
})
// 菜单点击事件
const menuClick = (item: { name: string; maxName: string; }, index: number) => {
    if (index == 5) {
        // openFullScreen2(true)
    }
    actIndex.value = index
    tabname.value.name = item.name
    tabname.value.maxName = item.maxName
}
const idShow = ref(true)
const shouClick = () => {
    idShow.value = !idShow.value
}

const currentComponent = ref(markRaw(HistoricalTrend))


const danList = ref([
    {
        name: '单线图',
        type: ''
    },
    {
        name: '数字孪生',
        type: ''
    }
])
const daIndex = ref(0)
const danClick = (index: number) => {
    daIndex.value = index
}

// 退出登录
const logout = () => {
    // router.push({
    //     path: "/login",
    // });
}

// 检查本地存储中是否存在某个值
const hasLocalValue = computed(() => {
    const value = localStorage.getItem('myValue');
    return value !== null && value !== undefined;
});

// 判断是否使用 v-if
const shouldUseVIf = computed(() => !hasLocalValue.value);
console.log("===sssss==>", shouldUseVIf.value)

const getValue = (event: boolean) => {
    // openFullScreen2(event)   
}



// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
    await getShebei()
});

// 销毁ECharts实例
onUnmounted(() => { });
</script>

<template>
    <FitScreen :width="1920" :height="1080" mode="fit">
        <div class="maxBox">
            <div class="zhuMax">
                <div class="zhuMax-top">
                    <div class="top-left">
                        <div class="logo" v-if="idShow && actIndex == 1">
                            <img src="@/assets/me_home/shou.png">
                        </div>
                        <div class="logo" @click="shouClick" v-else>
                            <img src="@/assets/me_home/shou.png" alt="" v-if="idShow">
                            <img src="@/assets/me_home/shou1.png" alt="" v-else>
                        </div>

                        <div class="top-left-1">
                            <img src="@/assets/zhuHome/icon1.png" alt="">
                        </div>
                        <div class="top-left-2">ME IPOWER IS</div>
                    </div>
                    <div class="top-right">
                        <!-- <div class="top-right-1"></div> -->
                        <div class="top-right-2">Powered By Midas Electric®</div>
                        <!-- 由Midas Electric®提供动力 -->
                        <div class="top-right-3">
                            <!-- <img src="@/assets/me_home/tuichu.png" alt=""> -->
                            <el-popconfirm title="确定要退出登录吗？" @confirm="logout">
                                <template #reference>
                                    <img src="@/assets/me_home/tuichu.png" alt="">
                                </template>
                            </el-popconfirm>
                        </div>
                    </div>
                </div>
                <div class="zhuMax-bom">
                    <div class="menu" v-if="idShow">
                        <div class="menu-top">
                            <div class="menu-item" :class="actIndex == index ? 'activeClass' : ''"
                                v-for="(item, index) in menuList" :key="index" @click="menuClick(item, index)">
                                <div class="icon">
                                    <img :src="actIndex == index ? item.actIcon : item.icon" alt="">
                                </div>
                                <div class="text">{{ item.name }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="conent">
                        <div class="conent-top">
                            <div class="conent-top-top">
                                <img src="../../assets/me_home/homebg.png" alt=""> Home > {{ tabname.name }}
                            </div>
                            <div class="bom-text" v-if="actIndex != 0">{{ tabname.maxName }}</div>
                        </div>
                        <!-- 地理视图 -->
                        <div class="conent-bom" v-if="actIndex == 0" style="padding-right:40px;padding-bottom:40px">
                            <MapView />
                        </div>
                        <!-- 电气柜体监控 -->
                        <div class="conent-bom" v-if="actIndex == 1">
                            <div class="conent-bom-left">
                                <div class="qieItem" :class="daIndex == index ? 'active3d' : ''"
                                    v-for="(item, index) in danList" :key="index" @click="danClick(index)">{{ item.name
                                    }}</div>
                            </div>

                            <div class="danxianTu" v-if="daIndex == 0">
                                <img src="../../assets/pds_shebei/danxiantu.png" alt="">
                            </div>

                            <div class="conent-bom-right">
                                <el-table :data="tableData" style="width: 100%" max-height="780">
                                    <el-table-column prop="_ip" label="柜体名称" width="190" />
                                    <el-table-column prop="cabinetNum" label="柜号" width="180" />
                                    <el-table-column prop="voltLevel" label="电压等级" />
                                    <el-table-column prop="eventTotalCount" label="事件数" center />
                                    <el-table-column prop="totalScore" label="柜体健康度" />
                                </el-table>
                                <!-- <el-table :data="tableData" border style="width: 100%;margin-top: 50px;">
                                    <el-table-column prop="date" label="柜体名称" width="180"/>
                                    <el-table-column prop="name" label="柜号" width="180" />
                                    <el-table-column prop="address" label="电压等级" />
                                    <el-table-column prop="shijian" label="事件数"  center/>
                                    <el-table-column label="柜体健康度">
                                        <template #default="scope">
                                            <div class="zhiDeng" ></div>
                                        </template>
                                    </el-table-column>
                                </el-table> -->
                            </div>
                        </div>
                        <!-- 历史趋势 -->
                        <div class="conent-bom" v-if="actIndex == 5">
                            <HistoricalTrend @getValueMax="getValue" />
                        </div>

                        <!-- <keep-alive include="HistoricalTrend">
                                <HistoricalTrend @getValueMax="getValue" />
                            </keep-alive> -->
                        <!-- 
                         <KeepAlive :max="10" :include="['currentComponent']">
                                <component :is="currentComponent"></component>
                            </KeepAlive> -->
                        <!-- 维护 -->
                        <div class="conent-bom" v-if="actIndex == 6">
                            <Maintenance />
                        </div>

                    </div> 
                </div>
            </div>

            

            <!-- 固定背景色 -->
            <div class="maxBox-bg1"></div>
            <!-- 显示模型区域 -->
            <div class="maxBox-bg2" :class="actIndex == 1 ? 'width120' : ''"></div>
            <div class="maxBox-bg3"></div>
            <div class="maxBox-bg4"></div>
        </div>
    </FitScreen>
</template>

<style lang="scss" scoped>
@use "index";
</style>
